<template>
	<view>
		<view class="bg-white ">
			<view class="bank-tit text-bold">我的银行卡</view>
			<scroll-view class="scroll-box" scroll-y="true" @scrolltolower="scrolltolower()">
				<view class="card-item u-f-jsb" v-for="(item,index) in cardList" @tap.stop='chooseidc(item)'>
					<image  class="round" src="../../../../static/logo.png"></image>
					<view>
						<view class=" text-lg text-bold">
							{{item.bankType}}储蓄卡
						</view>
						<view class="text-sm" style="margin-top: 10rpx;">可用作提现</view>
					</view>
					<view class="flex1">
						<view>*****<text class=" text-lg text-bold">
							{{item.cardNum | idcard}}
						</text></view>
						<view class="delete" @tap.stop="delidcard(item.id)">
							删除<text class="icon iconfont icon-icon_shanchu_xian" style="margin-left: 16rpx;"></text>
						</view>
					</view>
				</view>
				<tui-no-data imgUrl="https://sbb-sbb.oss-cn-shenzhen.aliyuncs.com/static/images/my-img/img_nodata.png" v-if="noData1">暂未添加银行卡</tui-no-data>
				<view class="bootom-box" v-if="loadMore || noMoreFlag">
					<load-more :visible="loadMore "></load-more>
					<om-nomore :visible="noMoreFlag && !noData1" bgcolor="#f9f9f9"></om-nomore>
				</view>
			</scroll-view>
		</view>
		<view class="card-box">
			<view @click="toAdd" class="add-card">添加银行卡</view>
		</view>
		<tui-modal :show="modal1" @click="bankDel" @cancel="hide1" title="提示" content="确定要删除该银行卡信息吗？"></tui-modal>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				cardList:[],          //数据
				modal1:false,         //删除银行卡数据弹框是否展示
				id: '',               //银行卡id，删除时用到
				currentPage: 1,       //分页
				total: 0,             //数据总数
				loadMore: false,      //数据加载中
				noMoreFlag: false,    //没有更多数据了
				noData1: false,       //没有数据
			}
		},
		onShow() {
			this.clear();
			this.getCardList()
		},
		//只展示银行卡后四位
		filters: {
			idcard(str){
				str += '';
				return str.substr(str.length-4)
			}
		},
		methods:{
			//获取银行卡数据
			getCardList(){
				this.loadMore = true;
				this.$http.post('/api/auth/business/card/list ',{busiId: this.$store.state.userInfo.id , currentPage: this.currentPage}).then(res => {
					this.loadMore = false;
					this.total = res.data.total;
					if(this.total == 0) return this.noData1 = true;
					
					this.cardList = this.cardList.concat(res.data.rows)
				})
			},
			//点击
			chooseidc(item){
				//将相应银行卡信息缓存本地
				uni.setStorageSync('myidcard',item);
				uni.navigateBack({delta:1})
			},
			// 删除银行卡
			delidcard(id){
				this.id = id;
				this.modal1 = true
			},
			// 关闭
			hide1(){
				this.modal1 = false
			},
			// 确定删除
			bankDel(e){
				this.hide1();
				// e = 1 确定删除,e = 0 取消
				if(e.index ==1){
					this.$http.post('/api/auth/business/card/del',this.id).then(res => {
						this.$tip.toast('删除银行卡信息成功！');
						uni.removeStorageSync('myidcard');
						setTimeout(()=>{
							this.clear();
							this.getCardList()
						},1000)
					})
				}
			},
			//跳转到添加银行卡页面
			toAdd(){
				uni.redirectTo({url:"../addCard/addCard"})
			},
			//清除数据
			clear(){
				this.cardList = [];
				this.currentPage = 1;
				this.total = 0;
				this.loadMore = false;
				this.noMoreFlag = false;
				this.noData1 = false
			},
			//触底
			scrolltolower(){
				if(this.total == this.cardList.length) return this.noMoreFlag = true;
				this.currentPage++;
				this.getCardList()
			}
		},
	}
</script>

<style lang="scss" scoped>
.bg-white::before{
	content: '';
	position: absolute;
	top: -20rpx;
	left: 0;
	width: 100%;
	height: 180rpx;
	background-color: $main-color;
	z-index: -1;
}
.scroll-box{
	height: 70vh;
}
.bg-white{
	padding: 20rpx;
	margin: 20rpx;
	border-radius: 20rpx;
}
.bank-tit{
	margin-bottom: 30rpx;
}
.card-item{
	margin-bottom: 20rpx;
	color: #fff;
	padding: 30rpx;
	border-radius: 20rpx;
	background: linear-gradient(to right,#55aaff, #00d4d4);
	image{
		width: 90rpx;
		height: 90rpx;
		margin-right: 20rpx;
	}
}
.flex1{
	flex: 1;
	text-align: right;
	.delete{
		padding-left: 20rpx;
		border-left: 1px solid #fff;
		display: inline;
	}
}

.card-box{
	z-index:2;
	position: fixed;
	bottom: 0;
	width: 100vw;
	height: 120rpx;
	background-color: #FFFFFF;
	.add-card{
		margin: 20rpx 5%;
		width: 90%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 15px;
		border-radius: 40rpx;
		background-color: #2ba4f7;
	}
}

.bootom-box{
	height: 140rpx;
}
</style>

